<template>
	<view class="container">
		<view class="bg-box">
			<view class="main-bg-box">
				<view v-if='hairText'>
					<view class="header-box">{{index+1}}/{{allList.length+1}} &nbsp;&nbsp; 选答题</view>
					<view v-if='index < allList.length' v-for='item in allList' :key='item.id'>
						<view v-if='item.show'>
							<view class="title-box">{{item.questionName}}</view>
							<view class="answer-list">
								<view v-for='(m,index) in item.optionsList' :key='m.id'
									@click="selectBtnClick(item,m,index)">
									<view class="answer-item" :class="filterSelect(item,index)?'active':''">
										{{m.optionText}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if='index == allList.length'>
						<view>
							<view class="title-box">请您拍摄您的正面照片，便于更准确的了解您</view>
							<view class="answer-list" style="margin-top: 20px;">
								<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple
									:maxCount="1" :previewFullImage="true" width="80vw" height="150px"></u-upload>
							</view>
						</view>
					</view>
					<view v-if='index <= allList.length' class="btn-content-box">
						<view class="up-btn" @click="upBtnClick" v-if='index !== 0'>上一题</view>
						<view class="lower-btn" @click="LowerBtnClick" v-if='index  <allList.length'
							:style="{'width':index == 0?'100%':''}">下一题</view>
						<view class="lower-btn" @click="submitBtnClick" v-else>完成</view>
					</view>

				</view>
				<view v-else>
					<view style="font-size: 50rpx;color: #4385F7;text-align: center;margin: 50rpx 0;">恭喜完成测试</view>
					<view style="font-size: 36rpx;text-align: center;margin-top: 30rpx;color: #666666;">
						您的毛发健康综合得分为(满分100分)</view>
					<view
						style="font-size: 30rpx;text-align: center;margin-top: 40rpx;color: #4385F7;position:relative;">
						<view
							style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 80rpx;">
							{{score}}
						</view>
						<img style="width: 50vw;height: 50vw;" :src="baseURL+'/static/center/hair-test-detail.png'"
							alt="">
					</view>
					<view style="font-size: 36rpx;text-align: center;margin-top: 30rpx;color: #666666;">
						您的毛发自测已完成，我们已经初步了解您的毛发健康状况，并且安排了毛发管家与您联系。您也可以通过下方的预约入口，预约到店享受免费毛囊检测和医师面诊。
					</view>
					<view v-if='index <= allList.length' class="btn-content-box">
						<view class="counsel-box">在线咨询
							<button open-type="contact" style="width: 100%;height: 100%;opacity: 0;position: absolute;top: 0;left:0;
								padding:15px 30px;
								background: #6BA1FD;
								color: #fff;
								border-radius: 20px;
								text-align: center;">客服</button>
						</view>

						<view class="appointment-box" @click="bookingRegistrationMehtod">预约检测</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		questionnaireDetail,
		saveResult
	} from '@/api/axios/center.js'
	import baseUrl from "@/api/axios/baseUrl.js";
	export default {
		data() {
			return {
				answerList: [],
				allList: [],
				index: 0,
				DetailData: {},
				hairText: true,
				score: 0,
				baseURL: this.staticURL,
				fileList: []
			};
		},
		methods: {
			filterSelect(data, index) {
				if (data.selectType == '0') {
					return data.index === index
				} else {
					return data.index.toString().indexOf(index) != -1
				}
			},
			upBtnClick() {
				this.index = this.index - 1
				if (this.index < 0) {
					console.log('结束')
					return
				}

				this.allList = this.allList.map((item, index) => {
					item.value = item.value ? item.value : ''
					item.index = item.index || item.index === 0 ? item.index : ''
					console.log(index, this.index);
					if (index == this.index) {
						item.show = true
					} else {
						item.show = false
					}
					return item
				})
			},
			LowerBtnClick() {

				console.log(this.allList[this.index].value);
				if (!this.allList[this.index].value) {
					uni.showToast({
						icon: "none",
						title: '请选择答案后 下一步',
						duration: 3000
					});
					return
				}
				this.index = this.index + 1
				if (this.index > 5) {
					console.log('结束')
					return
				}
				this.allList = this.allList.map((item, index) => {
					item.value = item.value ? item.value : ''
					item.index = item.index || item.index === 0 ? item.index : ''
					if (index === this.index) {
						item.show = true
					} else {
						item.show = false
					}
					return item
				})
			},
			submitBtnClick() {
				let customerId = uni.getStorageSync("customerId");
				let arr = this.allList.map(item => {
					return {
						[item.id]: item.value.toString()
					}
				})

				this.allList.forEach(item => {
					this.score += item.score
				})
				console.log(this.fileList);
				if (this.fileList.length > 0) {
					saveResult({
						image: this.fileList[0].url,
						customerId: customerId,
						questionnaireId: this.DetailData.id,
						processData: JSON.stringify(arr)
					}).then(res => {
						console.log(res);
						this.hairText = false
					})
				} else {
					saveResult({
						customerId: customerId,
						questionnaireId: this.DetailData.id,
						processData: JSON.stringify(arr)
					}).then(res => {
						console.log(res);
						this.hairText = false
					})
				}

			},
			selectBtnClick(item, m, index) {
				if (item.selectType == '0') {
					if (item.index === index) {
						item.index = ''
						item.value = ''
					} else {
						item.index = index
						item.value = m.id
						item.score = m.score
					}
				} else {
					if (item.index.toString().indexOf(index) != -1) {
						console.log(item.index, index);
						let indexArr = item.index.toString().split(',')
						indexArr = indexArr.filter(key => {
							if (key != index) {
								return key
							}
						})
						item.index = indexArr.join(',')


						let valueArr = item.value.toString().split(',')
						valueArr = valueArr.filter(key => {
							if (key != m.id) {
								return key
							}
						})
						item.value = valueArr.join(',')
						item.score = item.score - m.score
					} else {
						if (item.index === '') {
							item.index = index
							item.value = m.id
							item.score = m.score
						} else {
							item.index = item.index + ',' + index
							item.value = item.value + ',' + m.id
							item.score = item.score + m.score
						}

					}
					console.log(item);
				}
			},
			bookingRegistrationMehtod() {
				uni.navigateTo({
					url: "/pages-makeAnAppointmentCenter/MList/index",
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log(this[`fileList${event.name}`]);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl.url + "/xihefile/user/file/upload",
						filePath: url,
						name: "file",
						formData: {},
						success: (uploadFileRes) => {
							console.log(uploadFileRes);
							console.log(uploadFileRes.data.data);
							let url = JSON.parse(uploadFileRes.data).data;
							resolve(url);
						},
					});
				});
			},

		},
		created() {},
		mounted() {},
		onLoad(data) {
			questionnaireDetail({
				params: {
					questionnaireName: '毛发健康检测'
				}
			}).then(res => {
				console.log(res);

				this.allList = res.questionList.map((item, index) => {
					item.value = ''
					item.index = ''
					if (index == this.index) {
						item.show = true
					} else {
						item.show = false
					}
					return item
				})
				this.DetailData = {
					...res
				};
			})
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>